<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业1</title>
		<style>
			.top_context{
				height: 200px;
				background-color: #f4f4f4;
				text-align: center;
				line-height: 200px;
			}
			.sticky_element{
				height: 40px;
				background-color: #333;
				color: white;
				text-align: center;
				line-height: 40px;
			}
			.main_context{
				height: 8000px;
			}
			.sticky{
				position: fixed;
				top: 0px;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 
		 //吸顶灯效果---【了解】BOM案例:浏览器6个对象的方法使用
		 //思路:1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
		 //     2.页面顶部到吸顶灯位置:200px，大于200px
		 //     3.追加第一个样式:固定定位，页面顶部位置
		 
		 //     1.追加样式:吸顶灯卡在页面顶部
		 //     2.固定值：页面顶部到吸顶灯位置
		 -->
		 <script>
		 	// ready()事件源语法: $(document).ready(function(){});
		 	//				简写:$(function(){});
		 	//总结:页面元素全部加载完毕，在执行Q相关操作
		 	//script元素放在最后一个body位置【可不写】
		 	$(function(){
		 	//固定值:页面顶部到吸顶灯位置--B0M语法
		 	//offset()    获取或者设置元素相对于文档偏移量
		 	//offset().top     从顶部到吸顶灯元素的偏移量
		 	var se=$(".sticky_element").offset().top;
		 	
		 	//滚动值:BOM对象+事件源
		 	//$(window)抓取页面window对象，监听窗口事件:窗改变、滚动
		 	//理解：实时抓取页面滚动信
		 	$(window).scroll(function(){
		 	// 滚动值：获取页面滚动位置
		 	// scrollTop()获取页面垂直距离
		 	var st=$(window).scrollTop();
		 	
		 	// 判断 固定值大于滚动值，滚动超过200，实现切换:吸顶效果
		 	if(st>se){
		 		//条件成立:大于200px切换吸顶效果
		 		$(".sticky_element").addClass("sticky");
		 	}else{
		 		//条件不成立:小于200px
		 		$(".sticky_element").removeClass("sticky");
		 	}
		 	});
		 	});
		 </script>
	</head>
	<body>
		<div class="top_context">顶部内容区域</div>
		<div class="sticky_element">我是吸顶元素</div>
		<div class="main_context">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sit atque mollitia itaque 
			temporibus alias. Rem aperiam laboriosam aliquam placeat veniam error. 
			Cupiditate non iusto magni dolorum tempore sed sint.
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis consequuntur quae aspernatur enim odit modi placeat atque sit in,
			 repellendus, necessitatibus vel laboriosam optio corporis, earum iure minima qui dolorum.
			 Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus commodi autem dolorem aliquid dignissimos, 
			 sunt quam dolores, cupiditate voluptatibus error rerum corrupti ab fugiat quibusdam, odio harum iste in atque?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi placeat deleniti quod accusamus ullam laboriosam maxime id quos. Enim,
			  iusto reiciendis distinctio odio veritatis ut cum quidem optio neque placeat?</p>
		</div>
		
	</body>
</html>